<template>
    <div class="login">
        <!--标题-->
        <div>
            <h1 class="title1">智慧消防监控管理平台</h1>
        </div>
        <!--表单-->
        <el-form class="login-card" :model="loginForm" :rules="rules" ref="loginForm" label-width="25%" @keyup.enter.native="submitForm('loginForm')">
            <!--欢迎使用-->
            <h1 class="title2">欢迎使用</h1>
            <!-- 账户-->
            <el-form-item label="" class="name" prop="account" style="width: 90%;padding-top: 8px;">
                <el-input v-model="loginForm.account" placeholder="请输入用户名"></el-input>
            </el-form-item>
            <!-- 密码-->
            <el-form-item label="" class="password" prop="password" style="width: 90%;padding-top: 4px">
                <el-input show-password v-model="loginForm.password" placeholder="请输入密码"></el-input>
            </el-form-item>
            <!--验证码-->
            <el-form-item label="" class="code" prop="code" style="width: 90%">
                <el-input v-model="loginForm.code" class="code-input" placeholder="请输入验证码" style="width: 50%;float: left"></el-input>
                <span @click="refreshCode" style="padding-left: 35px">
            <s-identify :identifyCode="identifyCode" ></s-identify>
            </span>
            </el-form-item>
            <!--登录按钮-->
            <el-form-item>
                <el-button type="primary" @click="submitForm('loginForm')" :disabled="!canSubmit" style="width: 65%"><h2>登 录</h2></el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
    import SIdentify from "@/views/SIdentify.vue";
    import request from "@/utils/request";
    import axios from 'axios';
    export default {
        name: "Login",
        components: { SIdentify },
        data() {
            return {
                // 表单信息
                loginForm: {
                    account: '',
                    password: '',
                    code: '',
                },
                identifyCodes: '1234567890',//随机串内容
                identifyCode: '',
                // 表单验证
                rules: {
                    account: [
                        {required: true, message: '请输入用户名', trigger: 'blur'},
                    ],
                    password: [
                        {required: true, message: '请输入密码', trigger: 'blur'},
                    ],
                    code: [
                        {required: true, message: '验证码不能为空', trigger: 'blur'},
                    ]
                }
            }
        },
        // 默认验证码
        created() {
            this.identifyCode = ''
            this.makeCode(this.identifyCodes, 4)
        },
        computed:{
            canSubmit(){
                const {account,password,code}=this.loginForm
                return Boolean(account&&password&&code)
            }
        },
        methods: {

            // 刷新验证码
            refreshCode() {
                this.identifyCode = ''
                this.makeCode(this.identifyCodes, 4)
            },

            makeCode(o, l) {
                for (let i = 0; i < l; i++) {
                    this.identifyCode += this.identifyCodes[this.randomNum(0, this.identifyCodes.length)]
                }
            },

            randomNum(min, max) {
                return Math.floor(Math.random() * (max - min) + min)
            },

            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        if (this.loginForm.code.toLowerCase() !== this.identifyCode.toLowerCase()) {
                            this.$message.error('请填写正确验证码')
                            this.refreshCode()
                            return
                        }
                        request.post("user/login",this.loginForm).then(res=>{
                            if (res.code=="200"){
                                // debugger;
                                this.$message({
                                    type:"success",
                                    message:"登录成功"
                                })
                                localStorage.setItem("user",JSON.stringify(res.data))
                                this.$router.push("/")
                            }
                            else {
                                this.$message.error('用户名或密码错误')
                                return false;
                            }
                        })
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                })
            }

        }

    }

</script>
<style scoped>
    .login-container {
        position: absolute;
        height: 100%;
        width: 100%;
        background: url("../assets/back.png");
        background-size: 100%;
    }
    .title1 {
        width: 500px;
        padding: 10px;
        text-shadow: -3px 3px 1px #5f565e;
        margin: 140px auto;
        color: whitesmoke;
        font-size: 42px;
    }
    .title2 {
        color: rgb(0, 166, 255);
        font-size: 28px;
        padding-left: 38%;
    }
    .login-card {
        width: 450px;
        margin: -150px auto;
        background-color: rgb(255, 255, 255);
        border-radius: 20px;
        padding: 10px 30px 10px 10px;
        opacity: 0.9;
    }
    .name {
        background: url("../assets/name.png") no-repeat;
        background-size: 30px 30px;
        background-position: 17%;
    }
    .password {
        background: url("../assets/password.png") no-repeat;
        background-size: 30px 30px;
        background-position: 17%;
    }
    .code {
        background: url("../assets/code.png") no-repeat;
        background-size: 30px 30px;
        background-position: 17%;
    }
</style>